<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      /* 设置表格内容的水平对齐方式为居中，但通常这个属性用于表格自身在包含它的块级元素中的对齐 */
      text-align: center;
      /* 设置表格的边框合并为一个单一的边框，使得相邻单元格的边框合并显示 */
      border-collapse: collapse;
    }


    td, th {
      border: 1px solid #333;
      padding: 8px 16px;
    }

    table tbody tr:nth-child(1) {
      color: red;
      font-weight: 700;
    }

  </style>
</head>
<body>
  
  <table>
<!--
    caption 标签定义表格的标题，它必须紧随 <table> 标签之后。这并不是一个必须的元素，但是如果你使用它，必须确保它是第一个元素。

    thread 标签定义表格的头部。thead 内部必须拥有一个或多个 tr（表行）元素。
    thead 元素内部的表格行（tr）通常包含表头单元格（th）。
    thead 元素是可选的。如果表格非常大，那么把头部放在表格顶部可以让用户快速定位到表头部分。
        th 标签定义 HTML 表格中的表头单元格。th 元素通常包含 thead 内的一个或多个 tr（表行）和 td（表数据/单元）。
        th 元素默认的文本是粗体的。
        th 元素也可以包含标题、图片或样式，来定义表头单元格的外观。
        th 元素还可以设置列宽、对齐属性等。

    tbody 标签定义表格的主体。tbody 元素内部必须拥有一个或多个 tr（表行）元素。
    tbody 元素用于组合 HTML 表格的主体内容。

    tfoot 标签定义表格的页脚。tfoot 元素内部必须拥有一个或多个 tr（表行）元素。
    tfoot 元素用于组合 HTML 表格的页脚内容。
    tfoot 元素应该位于表格的最后面，在 tbody 之后。
    tfoot 元素通常包含汇总信息。
    tfoot 元素内部的表格行（tr）通常包含表尾单元格（td）。
    tfoot 元素是可选的。如果表格非常大，那么把页脚放在表格底部可以让用户快速定位到页脚部分。
-->
    <caption style="text-align: left;">热门股票</caption>
    <thead>
      <tr>
        <th>排名</th>
        <th>股票名称</th>
        <th>股票代码</th>
        <th>股票价格</th>
        <th>股票的涨跌</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>1</td>
        <td>贵州茅台</td>
        <td>600519</td>
        <td>1800</td>
        <td>5%</td>
      </tr>
      <tr>
        <td>2</td>
        <td>腾讯控股</td>
        <td>00700</td>
        <td>400</td>
        <td>3%</td>
      </tr>
      <tr>
        <td>3</td>
        <td>五粮液</td>
        <td>000858</td>
        <td>160</td>
        <td>8%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
        <td>其他</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>